<!--  -->
<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      year: [2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009],
      data: {
        '2020': [431, 550, 878, 989, 351, 391, 508, 1189],
        '2019': [428, 521, 868, 950, 335, 377, 506, 1167],
        '2018': [422, 512, 867, 936, 316, 367, 502, 1163],
        '2017': [423, 502, 867, 936, 299, 354, 478, 1159],
        '2016': [411, 486, 850, 915, 300, 355, 461, 1112],
        '2015': [409, 478, 837, 889, 285, 370, 458, 1096],
        '2014': [405, 462, 828, 879, 271, 380, 443, 1053],
        '2013': [407, 452, 801, 872, 261, 376, 430, 1029],
        '2012': [400, 462, 790, 868, 253, 356, 430, 983],
        '2011': [384, 454, 790, 839, 254, 346, 420, 970],
        '2010': [372, 452, 770, 823, 259, 347, 394, 932],
        '2009': [359, 448, 770, 802, 240, 349, 394, 923]
      },
      colorDict: {
        '英国': 'red',
        '美国': 'yellow',
        '英国': 'blue',
        '法国': 'green',
        '中国': '#0000CD',
        '日本': '#4169E1',
        '加拿大': '#98FB98',
        '意大利': '#48D1CC',
        '印度': '#7CFC00',
        '澳大利亚': '#ADFF2F',
        '瑞典': '#696969',
        '巴西': '#A0529D',
        '土耳其': '#A0522D',
        '墨西哥': '#EEDD82',
        '荷兰': '#F5DEB3',
        '西班牙': '#DEB887'
      },
      // 指定图表的配置项和数据
      option: {
        title: {
          text: '近60年各国GDP（Top10）',
          textStyle: {
            color: 'orange',
            fontSize: 40,
            fontFamily: '微软雅黑' // '华文彩云'
          },
          left: 'center',
          top: 30
        },
        // 配置项中，加入
        graphic: {
          elements: [
            {
              type: 'text',
              right: 190,
              bottom: 100,
              style: {
                text: 1960,
                font: 'bolder 80px monospace',
                fill: 'rgba(100, 100, 100, 0.25)'
              },
              z: 100
            }
          ]
        },
        grid: {
          top: 80,
          right: 180
        },
        xAxis: {
          max: 'dataMax',
          show: false // 去掉 xAxis 轴
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false }, // 去掉刻度
          axisLine: { show: false }, // 去掉轴线
          // data: ['A', 'B', 'C', 'D', 'E'],
          inverse: true, // 反向坐标轴
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 9 // 这里的 9 表示只显示 10 个国家
        },
        series: [
          {
            realtimeSort: true, // 对数据进行排序
            name: 'X',
            type: 'bar',
            itemStyle: {
              // color: 'red', // color使用一个值可以
              color: (params) => {
                console.log('pa=', params)
                return this.colorDict[params.value[0]] // 返回的值就是当前柱子的颜色
              }
            },
            // 需要修改这里的data值，给一个数组，随便给几个值
            data: this.getData(), // 这里使用模拟数据
            encode: {
              x: 4,   // 这里的4表示使用第5列的数据，即GDP，单位万亿
              y: 0    // 这里的0表示使用第1列的数据，即中文国家名
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true, // 柱子右侧的数字动态变化
              formatter: (param)=> {
                // 自定义每个柱子的标签（原来柱子后面只有GDP那个数字）
                // {img|} 是定义一个叫做 img 的样式名称，当然你可以换成其他的
                // param.value 仍然是当前国家的数据，下标4表示GDP
                // 这里整体的意思是，显示一个图片，图片后面放GDP那个数字
                console.log('fdf=', `{${param.value[1]}|}`)
                return `{img|} ` + '文本'
              },
              rich: {
                // 这里设置图片的路径，这里用了中国国旗
                img: {
                  backgroundColor: {
                    image: 'https://secure2.wostatic.cn/static/pWxGTxL7XBeN6BYXT1Racs/%E5%B7%B4%E8%A5%BF.png?auth_key=1697641151-eoYK8yCGkwSA1qr8u4Cns1-0-52a4d7a2f800258ae0e82778ba5f66bd&file_size=9192'
                  },
                  height: 32, // 这里设置国旗的宽度和高度
                  width: 48
                }
              }
            }
          }
        ],
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
    }
  },
  methods: {
    colors(name) {
      colorDict = {
        '英国': 'red',
        '美国': 'yellow',
        '英国': 'blue',
        '法国': 'green',
        '中国': '#0000CD',
        '日本': '#4169E1',
        '加拿大': '#98FB98',
        '意大利': '#48D1CC',
        '印度': '#7CFC00',
        '澳大利亚': '#ADFF2F',
        '瑞典': '#696969',
        '巴西': '#A0529D',
        '土耳其': '#A0522D',
        '墨西哥': '#EEDD82',
        '荷兰': '#F5DEB3',
        '西班牙': '#DEB887'
      }
      return colorDict[name]
    },
    getData() {
      let defaultData = [
        ['美国', 'America', 1960, 54329999360, 5400, 18067100, 300],
        ['英国', 'Britain', 1960, 7323396505, 700.34, 5240000, 139],
        ['法国', 'French', 1960, 6222547763, 600.25, 4662170, 133],
        ['中国', 'China', 1960, 5971646873, 500.16, 66707000, 8],
        ['日本', 'Japan', 1960, 4430734131, 400.07, 9321600, 47],
        ['加拿大', 'Canada', 1960, 4046172160, 400.62, 1790900, 225],
        ['意大利', 'Italy', 1960, 4038529024, 400.85, 5019970, 80],
        ['印度', 'India', 1960, 3702988390, 300.3, 45054800, 8],
        ['澳大利亚', 'Australia', 1960, 1857766809, 100.78, 1027650, 181],
        ['瑞典', 'Sweden', 1960, 1582258483, 100.23, 748466, 211],
        ['巴西', 'Brazil', 1960, 1516557004, 100.66, 7217920, 21],
        ['土耳其', 'Turkey', 1960, 1399506739, 100.95, 2747230, 50],
        ['墨西哥', 'Mexico', 1960, 1304000000, 100.4, 3777190, 34],
        ['荷兰', 'Netherlands', 1960, 1227673395, 100.77, 1148660, 106],
        ['西班牙', 'Spain', 1960, 1207212646, 100.72, 3045500, 39]
      ]
      return defaultData
    }
  },
  mounted() {
    let chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom);
    myChart.setOption(this.option);
    // 使用刚指定的配置项和数据显示图表。
    // 循环 5 次，测试一下，当然你也可以多循环几次
    for (let i = 0; i < 5; i++) {
      // 每循环一下，设置定时器，约定分别在0秒后，1秒后，2秒后，3秒后，4秒后随机增加GDP
      setTimeout(() => {
        // 找到series中的数据，遍历。
        console.log('this.option.series[0]=', this.option.series[0])

        this.option.series[0].data.forEach(item => {
          // 让每一项随机加一些数
          item[4] = Math.round(item[4] + Math.random() * 200)
        })
        // 调用setOption，重新创建图表
        myChart.setOption(this.option)
      }, i * 1000)
    }
    // this.option && myChart.setOption(this.option);
    // for (let i = 0; i < this.year.length; i++) {
    //   setTimeout(() => {
    //     let option1 = {
    //       title: {
    //         text: this.year[i].toString() + '年人口'
    //       },
    //       series: [{
    //         data: this.data[this.year[i].toString()]
    //       }]
    //     }
    //     myChart.setOption(option1)
    //   }, 500 * i)
    // }
  }
}

</script>
<style lang='less' scoped>
#main {
  width: 100%;
  height: 100%;
  // background: rgb(147, 128, 128);
}
</style>